<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>音频商店布局</title>
<style>
	html,body{
		padding:0px;
		margin:0px;
	}
	#head_text{
		float:left;
		width:65%;
		#text-align:center;
	}
	#head_text h1{
		text-shadow:-3px 3px 5px #333;
		margin-top:10px;
		margin-bottom:0px;
		margin-left:30px;
		font-size:70px;
		font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
	}
	#head_text h4{
		color:#333;
		position:relative;
		margin-top:0px;
		margin-right:400px;
		left:120px;
	}
	#head_table{
		padding:0px;
		float:left;
		width:20%;
		margin-top:30px;
		font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
	}
	#head_table table{
		border:2px solid #666;
		border-collapse:collapse;
	}
	#head_table th{
		background-color:#000;
		color:#CCC;
		padding:5px 20px;
		width:100%;
	}
	#head_table table td{
		font-weight:bold;
	}
	#head_nav{
		float:left;
		width:80%;
		background-color:#000;
		color:#CCC;
		padding:5px;
		margin-left:15px;
		font-weight:bold;
	}
	#head_nav a{
		color:#CCC;
		text-decoration:none;
	}
	#head_nav #strong_left{
		float:left;
	}
	#head_nav #strong_right{
		float:right;
		margin-right:15px;
	}
	#stock{
		margin-top:5px;
		margin-left:15px;
		float:left;
		padding:0px 0px;
		width:13%;
		border:2px solid #666;
		height:100%;
		clear:left;
		font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
		font-size:smaller;
	}
	#stock p{
		margin-right:0px;
		#width:100px;
		padding-left:5px;
		margin-top:3px;
		margin-bottom:4px;
		font-weight:bold;
	}
	#stock #p1{
		background-color:#000;
		color:#CCC;
		margin-top:0px;
		padding:5px;
	}
	#stock #plast{
		padding:5px;
		margin-bottom:0px;
		color:#CCC;
		background-color:#000;
	}
	#stock .group_h{
		font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
		font-size:larger;
		color:#666;
		padding:15px 5px;
	}
	#stock .group{
		font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
		font-size:larger;
		color:#666;
	}
	#content{
		float:left;
		width:67%;
		margin-left:10px;
	}
	#content #p_content_head{
		margin-top:2px;
		margin-bottom:2px;
	}
	#content #sort{
		float:right;
	}
	.content_sub{
		padding-top:20px;
		padding-bottom:210px;
	}
	.content_sub div{
		width:60%;
		float:left;
	}
	.content_sub img{
		float:right;
	}
	.content_sub input{
		float:left;
		width:155px;
		font-weight:bold;
		padding:2px 0px;
		margin-top:10px;
	}
	.content_sub .h_line{
		line-height:25px;
	}
	.del_line{
		color:red;
		text-decoration:line-through;
	}
</style>
</head>

<body>
<div id="head">
 	<div id="head_text">
    	<h1>StudioOne</h1>
      <h4>Professional Audio Supplies</h4>
    </div>
  <div id="head_table">
    	<table>
      	<tr>
        	<th colspan="2">Shopping basket</th>
        </tr>
        <tr>
        	<td>Qty</td>
          <td>0</td>
        </tr>
        <tr>
        	<td>Total(€)</td>
          <td>0.00</td>
        </tr>
      </table>
    </div>
  <div id="head_nav">
    	<strong id="strong_left">
    	<a href="#"> Home </a> :: <a href="#"> Store </a> :: <a href="#"> Hire </a>::
      <a href="#"> Service </a>::<a href="#"> Contact Us</a>
      </strong>
      <strong id="strong_right">
      <a href="#"> Account </a>::<a href="#"> Cart </a>::<a href="#"> Checkout </a>
      </strong>
    </div>
</div>
  <div id="stock">
  	<p id="p1">Stock</p>
    <p class="group_h">New Sales</p>
    <p>Mixing Desks (2)</p>
    <p>Recorders (1)</p>
    <p>Microphones (2)</p>
    <p>MonRers (2)</p>
    <p>Outboard (7)</p>
    <p class="group">Computers</p>
    <p>Interfaces (3)</p>
    <p>Software (2)</p>
    <p class="group">Misc</p>
    <p>Media (13)</p>
    <p class="group_h">Used Sales</p>
    <p>S/H Mixing Desks (2)</p>
    <p>S/H Recorders (1)</p>
    <p>S/H Microphones (1)</p>
    <p>S/H MonItors (2)</p>
    <p class="group">S/H Misc</p>
    <p>S/H Outboard (2)</p>
    <p class="group">S/H Computers</p>
    <p>S/H Interfaces (1)</p>
    <p id="plast">Hire Stock</p>
  </div>
  <div id="content">
  	<p id="p_content_head"><strong>You are at</strong> : All > New Sales > Moniters</p>
		<hr />
    <div id="sort">
    	<label for="sel_sort">Sort :</label>
      <select id="sel_sort">
      	<option>Item Description</option>
        <option>You can't see me</option>
        <option>You can't see me too :)</option>
      </select>
    </div>
    <div class="content_sub">
    	<div>
        <p><strong>Geneiec 1029A (pair)</strong></p>
        <p class="h_line">
          The extremely compact 1029A is a powerful biamplified 
          nearfield monitor system ideal for project
          and home studios,digital workstations,and surround
          sound monitoring.
        </p>
        <p style="margin:1px 0px;">List Price: <span class="del_line">€499.00</span></p>
        <p style="margin:1px 0px;"><strong>Our Price: €450.00</strong></p>
        <p style="margin:1px 0px;">You Save: €49.00(10%)</p>
        <input type="button" id="buy0" value="Buy Now" />
      </div>
      <img src="logo.jpg" alt="Geneiec 1029A picture" />
    </div>
    <hr style="clear:left;" color="#CCC" />
    <div class="content_sub">
    	<div>
        <p><strong>Geneiec 1031A (pair)</strong></p>
        <p class="h_line">
          Compact, yet powerful nearfield/midfield monitors,
          with legendary Geneiec build and quality.
        </p>
        <p style="margin:1px 0px;">List Price: <span class="del_line">€1,700.00</span></p>
        <p style="margin:1px 0px;"><strong>Our Price: €1,1450.00</strong></p>
        <p style="margin:1px 0px;">You Save: €330.00(19%)</p>   
        <input type="button" id="buy1" value="Buy Now" />
      </div>
      	<img src="logo.jpg" alt="Geneiec 1031A picture" />
    </div>
  </div>
</body>
</html>
